import SelectShopModal from "@/pages/OrderModule/common/bizcomponents/SelectShopModal";
import React, { useState } from "react";
import { Input } from "@/views/components/PrefixPlaceholder";
import { CloseCircleFilled } from "@ant-design/icons";

/**
 * SelectShopInputModal
 */
export default React.memo(({ value, onChange, placeholder = "请选择店铺", ...restProps }) => {
	const { multiple } = restProps;
	const [inputValue, setInputValue] = useState("");

	const modalOnchange = e => {
		if (multiple) {
			setInputValue(e.map(item => item.label).join());
			onChange(e.map(item => item.id));
		} else {
			setInputValue(e.label);
			onChange(e.id);
		}
	};

	const clearInput = () => {
		setInputValue(null);
		onChange(null);
	};
	return (
		<SelectShopModal
			valueKey="id"
			defaultValue={value}
			onChange={modalOnchange}
			append={
				value && (
					<CloseCircleFilled
						style={{ fontSize: 12, color: "#ccc", position: "absolute", right: 10, top: 10, cursor: "pointer" }}
						onClick={clearInput}
					/>
				)
			}
			{...restProps}
		>
			<Input value={inputValue} placeholder={placeholder} suffix={value && (
					<CloseCircleFilled
						onClick={(e) => {
							e.stopPropagation();
							clearInput()
						}}
					/>
				)} />
		</SelectShopModal>
	);
});
